<template>
    <div class="bg-img">
        <div class="boxs">
            <div class="logo">
                <img src="../assets/img/login.png" alt="">
                <p><span>登&nbsp;&nbsp;录</span></p>
                <p>欢迎登录OA办公后台管理系统</p>
            </div>
            <div class="inputs">
                <i class="iconfont icon-denglu-copy"></i>
            <el-input
                placeholder="请输入手机号码或者工号"
                v-model.trim="user"
                clearable>
                </el-input> 
            </div>
            <div class="inputs">
                <i  class="iconfont icon-mima"></i>
            <el-input
                placeholder="请输入密码"
                v-model.trim="pawd"
                clearable 
                >
                </el-input> 
            </div>
            <div class="text">
                <input type="checkbox" name="" id="" style="cursor: pointer;">
                <p>我已阅读并同意</p>
                <p>《用户隐私政策》</p>
            </div>
            <div class="login">
                <p @click="logins">登录</p>
            </div>
            <p class="forget">忘记密码请联系管理员</p>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
        return {
            user: '',
            pawd: '',
            bol:true
        }
        },
        methods:{
           logins(){
            this.$router.push('/HomePage')
           }
        },


        
    }
</script>
<style lang="scss" scoped>
.bg-img{
  width: 100%;
  height: 100vh;
  background-image: url('../assets/img/loginbg.jpg');
  background-size: cover;
}
.boxs{
    padding: 50px 0;
    width: 440px;
    height: 600px;
    background: #fff;
    margin: auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 16px;
    text-align: center;
    box-sizing: border-box;

}
.logo{
    img{
        width: 88px;
        height: 88px;
    }
    p{
        &:nth-of-type(1){
            font-size: 30px;
            margin-bottom: 10px;
        }
        &:nth-of-type(2){
            font-size: 16px;
            color: #999999;
            margin-bottom: 40px;
        }
    }
}
.inputs{
    display: flex;
    margin-bottom: 20px;
    position: relative;
    ::v-deep .el-input--suffix .el-input__inner{
        width: 335px;
        height: 44px;
        padding-left: 30px;
    }
    i{
        position: absolute;
        left: 60px;
        top: 14px;
        z-index: 1;
        color: #cccccc;
    }
}
.text{
    width: 335px;
    height: 20px;
    display: flex;
    align-items: center;
    margin: 30px auto  10px;
    p{
        margin:0 0 0 10px;
        font-size: 14px;
        &:nth-of-type(1){
            color: #999;
        }
        &:nth-of-type(2){
            
            color:#2561ef
        }
    }
}
.login{
    width: 335px;
    height: 44px;
    line-height: 44px;
    font-size: 16px;
    color: #fff;
    background-color: #2561ef;
    border-radius: 10px;
    margin: auto;
    cursor: pointer;
}
.forget{
    font-size: 14px;
    color: #cccccc;
    margin-top: 20px;
    cursor: pointer;
}
</style>
